<template>
  <div id="tabSecond">
    <el-table class="second-level" :data="dataList" :row-class-name="getRowClass" @expand-change="getSecondList"
              current-row-key="id">
      <el-table-column label="" prop="" :width="iconWidth"></el-table-column><!--仿树结构，改变空格大小，实现错位功能-->
      <el-table-column type="expand">
        <template slot-scope="scope">
          <tab-second :dataList="scope.row.children" :level="secondLevel"></tab-second>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="机关名称"></el-table-column>
      <el-table-column prop="isOpen" label="是否启用" width="160">
        <template  slot-scope="scope">
          {{scope.row.isOpen=="1"?"启用":"停用"}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="warning" size="mini">编辑</el-button>
          <el-button type="success" size="mini" @click="showLook(scope.row.id)">查看党员</el-button>
        </template>
      </el-table-column>
    </el-table>
    <diaLook :lookData="lookData" v-if="lookData.isShow"></diaLook>
  </div>
</template>

<script>
  import tabSecond from "@component/organManage/common/tabSecond" //二级table
  import diaLook from "@component/organManage/common/diaLookMember" //查看党员
  export default {
    name: "tab-second",
    props: ["dataList", "level"],
    data() {
      return {
        lookData:{//查看党员
          isShow:false,
          tabData:[]
        },
      }
    },
    computed: {
      secondLevel() {
        var num = this.level + 1;
        return num;
      },
      tdWidth() {
        var num = 240 - 20 * (this.level + 1);
        return num;
      },
      iconWidth() {
        var num = 10 + 20 * (this.level + 1);
        return num;
      }
    },
    methods: {
      getRowClass({row, rowIndex}) {
        row.index = rowIndex;
        if (row.haveChildren) {
          return "";
        } else {
          return "hide-expand"
        }
      },
      /*展开二级列表*/
      getSecondList(row, expandedRows) {
        if (!row.haveChildren || (row.haveChildren && row.children.length != 0)) {
          return;
        }
        var _this = this,
          index = row.index;

        /*给二级列表赋值*/
        let data=[
          {
            isOpen: '1',
            name: this.level+'财政局财政所',
            id:this.level+"01",
            haveChildren:true,
            children:[]
          },
          {
            isOpen: '1',
            name: this.level+'财政局',
            id:this.level+"02",
            haveChildren:true,
            children:[]
          },
          {
            isOpen: '0',
            name: this.level+'畜牧局',
            id:this.level+"03",
            haveChildren:false,
            children:[]
          },
        ]
        this.dataList[index].children = data;
        /*let url = this.apiUrl + "/platformTag/getChildTree";
        let params = {
          platformCode: row.platformCode,
          parentCode: row.id
        };
        this.publicFuction.publicRequest('get', url, params, function (data) {
          _this.getSecondCallback(data, index);
        });*/
      },
      /*给二级列表赋值*/
      getSecondCallback(response, index) {
        this.dataList[index].children = response.data;
      },
      showLook(id){
        this.lookData.tabData=[{},{},{}];
        this.lookData.isShow=true;
      },
    },
    components:{
      tabSecond,
      diaLook
    }
  }
</script>

<style lang="less">
  /*@import url("./assets/style/secondTabStyle.less");*/
  #tabSecond {
    .el-table {
      font-size: 12px;
      color: #666;
      thead {
        font-size: 12px;
        line-height: 36px;
        color: #999;
        tr, th {
          background: #f0f0f0;
          padding: 0;
        }
      }
      .cell {
        padding-left: 0;
      }
    }
    tr:hover td {
      background-color: #fff !important;
    }
    .second-level {
      width: auto;
      box-sizing: border-box;
      &:before {
        height: 0;
      }
      .el-table__header-wrapper {
        display: none;
      }
      .el-table__row:last-child {
        td {
          border-bottom: 0 !important;
        }
      }
    }
    .el-table__expanded-cell[class*=cell] {
      padding: 0 !important;
    }
    .hide-expand {
      .el-table__expand-icon {
        cursor: default;
      }
      .el-table__expand-column .el-icon {
        visibility: hidden;
      }
    }
  }
</style>

